---
import '../styles/global.css'
import '../styles/home.css'

import { getEntryBySlug } from 'astro:content'
import SEO from '../components/SEO.astro'
import ColoredTitle from '../components/ColoredTitle.astro'
import ExternalNav from '../components/ExternalNav.astro'
import EditButton from '../components/EditButton.astro'
import ScrollPadding from '../components/ScrollPadding.astro'

const intro = await getEntryBySlug('chapters', 'intro')
const chapterOne = await getEntryBySlug('chapters', 'the-basics')
const { Content: Intro } = await intro.render()
---

<html lang='en'>
<head>
	<meta charset='utf-8' />
	<meta name='viewport' content='width=device-width, initial-scale=1' />

	<link rel='preconnect' href='https://fonts.googleapis.com' />
	<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin />
	<link href='https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,400;0,700;1,400&display=swap' rel='stylesheet' />

	<SEO chapterSlug='intro' />
	<script defer data-domain='cpu.land' src='https://plausible.io/js/script.js' />
</head>
<body>
	<a class='orpheus-flag' target='_blank' href='https://hackclub.com/'>
		<img src='/orpheus-flag.svg' width='560' height='315' alt='A project by Hack Club' title='A project by Hack Club' />
	</a>

	<header>
		<img src='/squiggles/top.svg' class='squiggles top' alt='' aria-hidden='true' />
		<div class='content'>
			<h1><ColoredTitle onDark /></h1>
			<p class='abstract'>Curious exactly what happens when you run a program on your computer? Read this article to learn how multiprocessing works, what system calls really are, how computers manage memory with hardware interrupts, and how Linux loads executables.</p>
			<p>
				By
				<a target='_blank' href='https://kognise.dev/'>Lexi Mattick</a>
				&
				<a href='https://hackclub.com/'>Hack Club</a>
				&middot;
				July, 2023
			</p>
		</div>
		<img src='/squiggles/bottom.svg' class='squiggles bottom' alt='' aria-hidden='true' />
	</header>
	<ExternalNav noScript currentChapterSlug='intro' />

	<main>
		<div class='content'>
			<h2 id='from-the-beginning'>
				From the beginning&hellip;
				<EditButton chapterSlug='intro' />
			</h2>

			<Intro />

			<a class='continue' href='the-basics'>
				Continue to Chapter 1: {chapterOne.data.title}
				<span aria-hidden='true'>&raquo;</span>
			</a>
		</div>

		<ScrollPadding />
	</main>
</body>
</html>
